import { DatePicker } from 'antd';
import React from 'react';
import moment from 'moment';

const { RangePicker } = DatePicker;

const RangePickerSelect = (props, ref) => {
  const { value, onChange, fieldProps = {} } = props;
  const transformTimeToDate = (values) => {
    if (Array.isArray(values) && values.length === 2) {
      return values.map((item) => item && moment(item));
    }
    return values;
  };

  return (
    <RangePicker
      allowClear
      showTime
      format="YYYY-MM-DD HH:mm:ss"
      style={{ width: '100%' }}
      value={transformTimeToDate(value)}
      onChange={(e, s) => {
        onChange && onChange(s);
      }}
      {...fieldProps}
    />
  );
};

export default React.forwardRef(RangePickerSelect);
